<template>
  <ul class="wrapper">
    <template v-for="(item,i) in items">
        <li :class="['row',{'anim-move':anim}]" :style="{background:i==0?'#1c264c':'transparent'}">{{item}}</li>
    </template>
    
  </ul>
</template>

<script>
export default {
  name:'',
  components: {},
  data() {
    return {
        timer:null,
        anim:true
    };
  },
  props: {
    items:{
        default:()=>{
            return []
        }
    }
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.setTimer();
  },
  methods: {
    setTimer(){
        // this.anim =true;
        this.timer = setTimeout(()=>{
        // this.anim =false;
            if(this.items.length>0){
                this.items.push(this.items[0]);
                this.items.shift()
                this.setTimer()
            }
        },10000)
    }
  }
};
</script>
<style scoped>
.wrapper {
    height:100%;
    width:100%;
}
.anim-move {
    animation: move 10s linear infinite;
}
.row {
    height:30px;
    width:100%;
    font-size: 16px;
    color: white;
}
@keyframes move {
    0% { transform: translateY(0); }
    100% { transform: translateY(-30px); }
}
/* @keyframes move {
    0% { transform: scaleY(100%); }
    100% { transform: scaleY(0); }
} */
</style>